<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4383235" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xeaff;</span>
                <div class="name">双箭头_左_line</div>
                <div class="code-name">&amp;#xeaff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb00;</span>
                <div class="name">双箭头_右_line</div>
                <div class="code-name">&amp;#xeb00;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb01;</span>
                <div class="name">键盘_line</div>
                <div class="code-name">&amp;#xeb01;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafd;</span>
                <div class="name">展开侧栏_line</div>
                <div class="code-name">&amp;#xeafd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafe;</span>
                <div class="name">收起侧栏_line</div>
                <div class="code-name">&amp;#xeafe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafc;</span>
                <div class="name">视频_fill</div>
                <div class="code-name">&amp;#xeafc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafb;</span>
                <div class="name">文件夹_添加_line</div>
                <div class="code-name">&amp;#xeafb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeafa;</span>
                <div class="name">文档_记录_line</div>
                <div class="code-name">&amp;#xeafa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf8;</span>
                <div class="name">居中对齐_line</div>
                <div class="code-name">&amp;#xeaf8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf9;</span>
                <div class="name">裁剪_line</div>
                <div class="code-name">&amp;#xeaf9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf7;</span>
                <div class="name">全屏_line</div>
                <div class="code-name">&amp;#xeaf7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf5;</span>
                <div class="name">图片_添加_line</div>
                <div class="code-name">&amp;#xeaf5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf6;</span>
                <div class="name">文字_line</div>
                <div class="code-name">&amp;#xeaf6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf1;</span>
                <div class="name">层级_line</div>
                <div class="code-name">&amp;#xeaf1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf2;</span>
                <div class="name">电话_fill</div>
                <div class="code-name">&amp;#xeaf2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf3;</span>
                <div class="name">拖动柄_fill</div>
                <div class="code-name">&amp;#xeaf3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf4;</span>
                <div class="name">层级_fill</div>
                <div class="code-name">&amp;#xeaf4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf0;</span>
                <div class="name">发布_line</div>
                <div class="code-name">&amp;#xeaf0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaef;</span>
                <div class="name">清晰_line</div>
                <div class="code-name">&amp;#xeaef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaad;</span>
                <div class="name">渠道_line</div>
                <div class="code-name">&amp;#xeaad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaee;</span>
                <div class="name">加号_方形_line</div>
                <div class="code-name">&amp;#xeaee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae8;</span>
                <div class="name">QA_line</div>
                <div class="code-name">&amp;#xeae8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae9;</span>
                <div class="name">占比图_line</div>
                <div class="code-name">&amp;#xeae9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaea;</span>
                <div class="name">助手_line</div>
                <div class="code-name">&amp;#xeaea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaeb;</span>
                <div class="name">hi_line</div>
                <div class="code-name">&amp;#xeaeb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaec;</span>
                <div class="name">数据2_line</div>
                <div class="code-name">&amp;#xeaec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaed;</span>
                <div class="name">房子_主页_line</div>
                <div class="code-name">&amp;#xeaed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae7;</span>
                <div class="name">文字_下划线_line</div>
                <div class="code-name">&amp;#xeae7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9e;</span>
                <div class="name">云_下载_line</div>
                <div class="code-name">&amp;#xea9e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeace;</span>
                <div class="name">历史纪录_line</div>
                <div class="code-name">&amp;#xeace;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadc;</span>
                <div class="name">星星_line</div>
                <div class="code-name">&amp;#xeadc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadd;</span>
                <div class="name">书_line</div>
                <div class="code-name">&amp;#xeadd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeade;</span>
                <div class="name">模板_line</div>
                <div class="code-name">&amp;#xeade;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadf;</span>
                <div class="name">文字_左对齐_line</div>
                <div class="code-name">&amp;#xeadf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae0;</span>
                <div class="name">时间_line</div>
                <div class="code-name">&amp;#xeae0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae1;</span>
                <div class="name">分享_line</div>
                <div class="code-name">&amp;#xeae1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae2;</span>
                <div class="name">文字_加粗_line</div>
                <div class="code-name">&amp;#xeae2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae3;</span>
                <div class="name">文字_右对齐_line</div>
                <div class="code-name">&amp;#xeae3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae4;</span>
                <div class="name">文字_斜体_line</div>
                <div class="code-name">&amp;#xeae4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae5;</span>
                <div class="name">文字_居中_line</div>
                <div class="code-name">&amp;#xeae5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeae6;</span>
                <div class="name">购物车_line</div>
                <div class="code-name">&amp;#xeae6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeacb;</span>
                <div class="name">二维码_line</div>
                <div class="code-name">&amp;#xeacb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeacc;</span>
                <div class="name">禁止_line</div>
                <div class="code-name">&amp;#xeacc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeacd;</span>
                <div class="name">店铺_line</div>
                <div class="code-name">&amp;#xeacd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeacf;</span>
                <div class="name">创作_line</div>
                <div class="code-name">&amp;#xeacf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead0;</span>
                <div class="name">对号_line</div>
                <div class="code-name">&amp;#xead0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead1;</span>
                <div class="name">汉堡_line</div>
                <div class="code-name">&amp;#xead1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead2;</span>
                <div class="name">背景_line</div>
                <div class="code-name">&amp;#xead2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead3;</span>
                <div class="name">女性_line</div>
                <div class="code-name">&amp;#xead3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead4;</span>
                <div class="name">箭头_下_line</div>
                <div class="code-name">&amp;#xead4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead5;</span>
                <div class="name">麦克风_line</div>
                <div class="code-name">&amp;#xead5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead6;</span>
                <div class="name">企业_line</div>
                <div class="code-name">&amp;#xead6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead7;</span>
                <div class="name">人员_line</div>
                <div class="code-name">&amp;#xead7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead8;</span>
                <div class="name">编辑_line</div>
                <div class="code-name">&amp;#xead8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xead9;</span>
                <div class="name">键盘_line</div>
                <div class="code-name">&amp;#xead9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeada;</span>
                <div class="name">向上_line</div>
                <div class="code-name">&amp;#xeada;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeadb;</span>
                <div class="name">关闭_line</div>
                <div class="code-name">&amp;#xeadb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab9;</span>
                <div class="name">我的_line</div>
                <div class="code-name">&amp;#xeab9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaba;</span>
                <div class="name">声纹2_line</div>
                <div class="code-name">&amp;#xeaba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeabb;</span>
                <div class="name">删除_line</div>
                <div class="code-name">&amp;#xeabb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeabc;</span>
                <div class="name">附件_line</div>
                <div class="code-name">&amp;#xeabc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeabd;</span>
                <div class="name">层级_line</div>
                <div class="code-name">&amp;#xeabd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeabe;</span>
                <div class="name">箭头_左_line</div>
                <div class="code-name">&amp;#xeabe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeabf;</span>
                <div class="name">手机_line</div>
                <div class="code-name">&amp;#xeabf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac0;</span>
                <div class="name">上传_line</div>
                <div class="code-name">&amp;#xeac0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac1;</span>
                <div class="name">看板_line</div>
                <div class="code-name">&amp;#xeac1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac2;</span>
                <div class="name">视频_line</div>
                <div class="code-name">&amp;#xeac2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac3;</span>
                <div class="name">音乐律动_line</div>
                <div class="code-name">&amp;#xeac3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac4;</span>
                <div class="name">声波_line</div>
                <div class="code-name">&amp;#xeac4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac5;</span>
                <div class="name">排序_line</div>
                <div class="code-name">&amp;#xeac5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac6;</span>
                <div class="name">导入_line</div>
                <div class="code-name">&amp;#xeac6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac7;</span>
                <div class="name">刷新_line</div>
                <div class="code-name">&amp;#xeac7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac8;</span>
                <div class="name">更多_纵向_line</div>
                <div class="code-name">&amp;#xeac8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac9;</span>
                <div class="name">男性_line</div>
                <div class="code-name">&amp;#xeac9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaca;</span>
                <div class="name">箭头_右_line</div>
                <div class="code-name">&amp;#xeaca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa6;</span>
                <div class="name">商品_line</div>
                <div class="code-name">&amp;#xeaa6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa7;</span>
                <div class="name">盒子_line</div>
                <div class="code-name">&amp;#xeaa7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa8;</span>
                <div class="name">文件夹_转存_line</div>
                <div class="code-name">&amp;#xeaa8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa9;</span>
                <div class="name">放大镜_搜索_line</div>
                <div class="code-name">&amp;#xeaa9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaaa;</span>
                <div class="name">向下_line</div>
                <div class="code-name">&amp;#xeaaa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaab;</span>
                <div class="name">问号_line</div>
                <div class="code-name">&amp;#xeaab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaac;</span>
                <div class="name">导出_line</div>
                <div class="code-name">&amp;#xeaac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaae;</span>
                <div class="name">收起_line</div>
                <div class="code-name">&amp;#xeaae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaaf;</span>
                <div class="name">设计_line</div>
                <div class="code-name">&amp;#xeaaf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab0;</span>
                <div class="name">向右_line</div>
                <div class="code-name">&amp;#xeab0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab1;</span>
                <div class="name">详情_line</div>
                <div class="code-name">&amp;#xeab1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab2;</span>
                <div class="name">眼睛_关闭_line</div>
                <div class="code-name">&amp;#xeab2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab3;</span>
                <div class="name">刷新2_line</div>
                <div class="code-name">&amp;#xeab3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab4;</span>
                <div class="name">音乐_line</div>
                <div class="code-name">&amp;#xeab4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab5;</span>
                <div class="name">声音_静音_line</div>
                <div class="code-name">&amp;#xeab5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab6;</span>
                <div class="name">贴纸_line</div>
                <div class="code-name">&amp;#xeab6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab7;</span>
                <div class="name">图片_line</div>
                <div class="code-name">&amp;#xeab7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab8;</span>
                <div class="name">人_说话_line</div>
                <div class="code-name">&amp;#xeab8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea94;</span>
                <div class="name">向左_line</div>
                <div class="code-name">&amp;#xea94;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea95;</span>
                <div class="name">声纹_line</div>
                <div class="code-name">&amp;#xea95;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea96;</span>
                <div class="name">领带_line</div>
                <div class="code-name">&amp;#xea96;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea97;</span>
                <div class="name">文件夹_line</div>
                <div class="code-name">&amp;#xea97;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea98;</span>
                <div class="name">数据_line</div>
                <div class="code-name">&amp;#xea98;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea99;</span>
                <div class="name">复制_line</div>
                <div class="code-name">&amp;#xea99;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9a;</span>
                <div class="name">更多2_line</div>
                <div class="code-name">&amp;#xea9a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9b;</span>
                <div class="name">拖动_line</div>
                <div class="code-name">&amp;#xea9b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9c;</span>
                <div class="name">文字识别_line</div>
                <div class="code-name">&amp;#xea9c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9d;</span>
                <div class="name">添加_line</div>
                <div class="code-name">&amp;#xea9d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea9f;</span>
                <div class="name">文字_line</div>
                <div class="code-name">&amp;#xea9f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa0;</span>
                <div class="name">箭头_上_line</div>
                <div class="code-name">&amp;#xeaa0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa1;</span>
                <div class="name">声音_line</div>
                <div class="code-name">&amp;#xeaa1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa2;</span>
                <div class="name">文档_line</div>
                <div class="code-name">&amp;#xeaa2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa3;</span>
                <div class="name">切换_line</div>
                <div class="code-name">&amp;#xeaa3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa4;</span>
                <div class="name">眼睛_打开_line</div>
                <div class="code-name">&amp;#xeaa4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa5;</span>
                <div class="name">摄像机_line</div>
                <div class="code-name">&amp;#xeaa5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea91;</span>
                <div class="name">声波_圆底_fill</div>
                <div class="code-name">&amp;#xea91;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea92;</span>
                <div class="name">叹号_圆底_fill</div>
                <div class="code-name">&amp;#xea92;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea7f;</span>
                <div class="name">相机_line</div>
                <div class="code-name">&amp;#xea7f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea80;</span>
                <div class="name">语音_line</div>
                <div class="code-name">&amp;#xea80;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea7e;</span>
                <div class="name">设置_line</div>
                <div class="code-name">&amp;#xea7e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea7d;</span>
                <div class="name">配置_line</div>
                <div class="code-name">&amp;#xea7d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea81;</span>
                <div class="name">下载_line</div>
                <div class="code-name">&amp;#xea81;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea93;</span>
                <div class="name">魔棒_line</div>
                <div class="code-name">&amp;#xea93;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea87;</span>
                <div class="name">暂停2_fill</div>
                <div class="code-name">&amp;#xea87;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea88;</span>
                <div class="name">叠加_fill</div>
                <div class="code-name">&amp;#xea88;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea89;</span>
                <div class="name">魔棒_fill</div>
                <div class="code-name">&amp;#xea89;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea8a;</span>
                <div class="name">消息_语音_fill</div>
                <div class="code-name">&amp;#xea8a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea8b;</span>
                <div class="name">摄像机_fill</div>
                <div class="code-name">&amp;#xea8b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea8c;</span>
                <div class="name">暂停_fill</div>
                <div class="code-name">&amp;#xea8c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea8d;</span>
                <div class="name">播放_fill</div>
                <div class="code-name">&amp;#xea8d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea8e;</span>
                <div class="name">文字_圆底_fill</div>
                <div class="code-name">&amp;#xea8e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea8f;</span>
                <div class="name">对号_圆底_fill</div>
                <div class="code-name">&amp;#xea8f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea90;</span>
                <div class="name">上升_fill</div>
                <div class="code-name">&amp;#xea90;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea84;</span>
                <div class="name">下降_fill</div>
                <div class="code-name">&amp;#xea84;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea82;</span>
                <div class="name">我的_fill</div>
                <div class="code-name">&amp;#xea82;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea83;</span>
                <div class="name">管理_fill</div>
                <div class="code-name">&amp;#xea83;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea85;</span>
                <div class="name">消息_回复_fill</div>
                <div class="code-name">&amp;#xea85;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea86;</span>
                <div class="name">看板_fill</div>
                <div class="code-name">&amp;#xea86;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1713950346881') format('woff2'),
       url('iconfont.woff?t=1713950346881') format('woff'),
       url('iconfont.ttf?t=1713950346881') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-shuangjiantou_zuo_line"></span>
            <div class="name">
              双箭头_左_line
            </div>
            <div class="code-name">.icon-shuangjiantou_zuo_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuangjiantou_you_line"></span>
            <div class="name">
              双箭头_右_line
            </div>
            <div class="code-name">.icon-shuangjiantou_you_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianpan_line1"></span>
            <div class="name">
              键盘_line
            </div>
            <div class="code-name">.icon-jianpan_line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhankaicelan_line"></span>
            <div class="name">
              展开侧栏_line
            </div>
            <div class="code-name">.icon-zhankaicelan_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouqicelan_line"></span>
            <div class="name">
              收起侧栏_line
            </div>
            <div class="code-name">.icon-shouqicelan_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin2_fill"></span>
            <div class="name">
              视频_fill
            </div>
            <div class="code-name">.icon-shipin2_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia_tianjia_line"></span>
            <div class="name">
              文件夹_添加_line
            </div>
            <div class="code-name">.icon-wenjianjia_tianjia_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendang_jilu_line"></span>
            <div class="name">
              文档_记录_line
            </div>
            <div class="code-name">.icon-wendang_jilu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-juzhongduiqi_line"></span>
            <div class="name">
              居中对齐_line
            </div>
            <div class="code-name">.icon-juzhongduiqi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caijian_line"></span>
            <div class="name">
              裁剪_line
            </div>
            <div class="code-name">.icon-caijian_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping_line"></span>
            <div class="name">
              全屏_line
            </div>
            <div class="code-name">.icon-quanping_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian_tianjia_line"></span>
            <div class="name">
              图片_添加_line
            </div>
            <div class="code-name">.icon-tupian_tianjia_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_line1"></span>
            <div class="name">
              文字_line
            </div>
            <div class="code-name">.icon-wenzi_line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cengji_line1"></span>
            <div class="name">
              层级_line
            </div>
            <div class="code-name">.icon-cengji_line1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianhua_fill"></span>
            <div class="name">
              电话_fill
            </div>
            <div class="code-name">.icon-dianhua_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuodongbing_fill"></span>
            <div class="name">
              拖动柄_fill
            </div>
            <div class="code-name">.icon-tuodongbing_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cengji_fill"></span>
            <div class="name">
              层级_fill
            </div>
            <div class="code-name">.icon-cengji_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fabu_line"></span>
            <div class="name">
              发布_line
            </div>
            <div class="code-name">.icon-fabu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qingxi_line"></span>
            <div class="name">
              清晰_line
            </div>
            <div class="code-name">.icon-qingxi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qudao_line"></span>
            <div class="name">
              渠道_line
            </div>
            <div class="code-name">.icon-qudao_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao_fangxing_line"></span>
            <div class="name">
              加号_方形_line
            </div>
            <div class="code-name">.icon-jiahao_fangxing_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-QA_line"></span>
            <div class="name">
              QA_line
            </div>
            <div class="code-name">.icon-QA_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhanbitu_line"></span>
            <div class="name">
              占比图_line
            </div>
            <div class="code-name">.icon-zhanbitu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhushou_line"></span>
            <div class="name">
              助手_line
            </div>
            <div class="code-name">.icon-zhushou_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hi_line"></span>
            <div class="name">
              hi_line
            </div>
            <div class="code-name">.icon-hi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuju2_line"></span>
            <div class="name">
              数据2_line
            </div>
            <div class="code-name">.icon-shuju2_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangzi_zhuye_line"></span>
            <div class="name">
              房子_主页_line
            </div>
            <div class="code-name">.icon-fangzi_zhuye_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_xiahuaxian_line"></span>
            <div class="name">
              文字_下划线_line
            </div>
            <div class="code-name">.icon-wenzi_xiahuaxian_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yun_xiazai_line"></span>
            <div class="name">
              云_下载_line
            </div>
            <div class="code-name">.icon-yun_xiazai_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishijilu_line"></span>
            <div class="name">
              历史纪录_line
            </div>
            <div class="code-name">.icon-lishijilu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingxing_line"></span>
            <div class="name">
              星星_line
            </div>
            <div class="code-name">.icon-xingxing_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shu_line"></span>
            <div class="name">
              书_line
            </div>
            <div class="code-name">.icon-shu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moban_line"></span>
            <div class="name">
              模板_line
            </div>
            <div class="code-name">.icon-moban_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_zuoduiqi_line"></span>
            <div class="name">
              文字_左对齐_line
            </div>
            <div class="code-name">.icon-wenzi_zuoduiqi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian_line"></span>
            <div class="name">
              时间_line
            </div>
            <div class="code-name">.icon-shijian_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang_line"></span>
            <div class="name">
              分享_line
            </div>
            <div class="code-name">.icon-fenxiang_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_jiacu_line"></span>
            <div class="name">
              文字_加粗_line
            </div>
            <div class="code-name">.icon-wenzi_jiacu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_youduiqi_line"></span>
            <div class="name">
              文字_右对齐_line
            </div>
            <div class="code-name">.icon-wenzi_youduiqi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_xieti_line"></span>
            <div class="name">
              文字_斜体_line
            </div>
            <div class="code-name">.icon-wenzi_xieti_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_juzhong_line"></span>
            <div class="name">
              文字_居中_line
            </div>
            <div class="code-name">.icon-wenzi_juzhong_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche_line"></span>
            <div class="name">
              购物车_line
            </div>
            <div class="code-name">.icon-gouwuche_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima_line"></span>
            <div class="name">
              二维码_line
            </div>
            <div class="code-name">.icon-erweima_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinzhi_line"></span>
            <div class="name">
              禁止_line
            </div>
            <div class="code-name">.icon-jinzhi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianpu_line"></span>
            <div class="name">
              店铺_line
            </div>
            <div class="code-name">.icon-dianpu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuangzuo_line"></span>
            <div class="name">
              创作_line
            </div>
            <div class="code-name">.icon-chuangzuo_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duihao_line"></span>
            <div class="name">
              对号_line
            </div>
            <div class="code-name">.icon-duihao_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hanbao_line"></span>
            <div class="name">
              汉堡_line
            </div>
            <div class="code-name">.icon-hanbao_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-beijing_line"></span>
            <div class="name">
              背景_line
            </div>
            <div class="code-name">.icon-beijing_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nvxing_line"></span>
            <div class="name">
              女性_line
            </div>
            <div class="code-name">.icon-nvxing_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_xia_line"></span>
            <div class="name">
              箭头_下_line
            </div>
            <div class="code-name">.icon-jiantou_xia_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maikefeng_line"></span>
            <div class="name">
              麦克风_line
            </div>
            <div class="code-name">.icon-maikefeng_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiye_line"></span>
            <div class="name">
              企业_line
            </div>
            <div class="code-name">.icon-qiye_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyuan_line"></span>
            <div class="name">
              人员_line
            </div>
            <div class="code-name">.icon-renyuan_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji_line"></span>
            <div class="name">
              编辑_line
            </div>
            <div class="code-name">.icon-bianji_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianpan_line"></span>
            <div class="name">
              键盘_line
            </div>
            <div class="code-name">.icon-jianpan_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangshang_line"></span>
            <div class="name">
              向上_line
            </div>
            <div class="code-name">.icon-xiangshang_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi_line"></span>
            <div class="name">
              关闭_line
            </div>
            <div class="code-name">.icon-guanbi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode_line"></span>
            <div class="name">
              我的_line
            </div>
            <div class="code-name">.icon-wode_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengwen2_line"></span>
            <div class="name">
              声纹2_line
            </div>
            <div class="code-name">.icon-shengwen2_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu_line"></span>
            <div class="name">
              删除_line
            </div>
            <div class="code-name">.icon-shanchu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fujian_line"></span>
            <div class="name">
              附件_line
            </div>
            <div class="code-name">.icon-fujian_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cengji_line"></span>
            <div class="name">
              层级_line
            </div>
            <div class="code-name">.icon-cengji_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_zuo_line"></span>
            <div class="name">
              箭头_左_line
            </div>
            <div class="code-name">.icon-jiantou_zuo_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouji_line"></span>
            <div class="name">
              手机_line
            </div>
            <div class="code-name">.icon-shouji_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan_line"></span>
            <div class="name">
              上传_line
            </div>
            <div class="code-name">.icon-shangchuan_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kanban_line"></span>
            <div class="name">
              看板_line
            </div>
            <div class="code-name">.icon-kanban_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin_line"></span>
            <div class="name">
              视频_line
            </div>
            <div class="code-name">.icon-shipin_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinlelvdong_line"></span>
            <div class="name">
              音乐律动_line
            </div>
            <div class="code-name">.icon-yinlelvdong_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengbo_line"></span>
            <div class="name">
              声波_line
            </div>
            <div class="code-name">.icon-shengbo_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paixu_line"></span>
            <div class="name">
              排序_line
            </div>
            <div class="code-name">.icon-paixu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daoru_line"></span>
            <div class="name">
              导入_line
            </div>
            <div class="code-name">.icon-daoru_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin_line"></span>
            <div class="name">
              刷新_line
            </div>
            <div class="code-name">.icon-shuaxin_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo_zongxiang_line"></span>
            <div class="name">
              更多_纵向_line
            </div>
            <div class="code-name">.icon-gengduo_zongxiang_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nanxing_line"></span>
            <div class="name">
              男性_line
            </div>
            <div class="code-name">.icon-nanxing_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_you_line"></span>
            <div class="name">
              箭头_右_line
            </div>
            <div class="code-name">.icon-jiantou_you_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangpin_line"></span>
            <div class="name">
              商品_line
            </div>
            <div class="code-name">.icon-shangpin_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hezi_line"></span>
            <div class="name">
              盒子_line
            </div>
            <div class="code-name">.icon-hezi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia_zhuancun_line"></span>
            <div class="name">
              文件夹_转存_line
            </div>
            <div class="code-name">.icon-wenjianjia_zhuancun_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangdajing_sousuo_line"></span>
            <div class="name">
              放大镜_搜索_line
            </div>
            <div class="code-name">.icon-fangdajing_sousuo_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangxia_line"></span>
            <div class="name">
              向下_line
            </div>
            <div class="code-name">.icon-xiangxia_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenhao_line"></span>
            <div class="name">
              问号_line
            </div>
            <div class="code-name">.icon-wenhao_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochu_line"></span>
            <div class="name">
              导出_line
            </div>
            <div class="code-name">.icon-daochu_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouqi_line"></span>
            <div class="name">
              收起_line
            </div>
            <div class="code-name">.icon-shouqi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sheji_line"></span>
            <div class="name">
              设计_line
            </div>
            <div class="code-name">.icon-sheji_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangyou_line"></span>
            <div class="name">
              向右_line
            </div>
            <div class="code-name">.icon-xiangyou_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangqing_line"></span>
            <div class="name">
              详情_line
            </div>
            <div class="code-name">.icon-xiangqing_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanjing_guanbi_line"></span>
            <div class="name">
              眼睛_关闭_line
            </div>
            <div class="code-name">.icon-yanjing_guanbi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin2_line"></span>
            <div class="name">
              刷新2_line
            </div>
            <div class="code-name">.icon-shuaxin2_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinle_line"></span>
            <div class="name">
              音乐_line
            </div>
            <div class="code-name">.icon-yinle_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengyin_jingyin_line"></span>
            <div class="name">
              声音_静音_line
            </div>
            <div class="code-name">.icon-shengyin_jingyin_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiezhi_line"></span>
            <div class="name">
              贴纸_line
            </div>
            <div class="code-name">.icon-tiezhi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian_line"></span>
            <div class="name">
              图片_line
            </div>
            <div class="code-name">.icon-tupian_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ren_shuohua_line"></span>
            <div class="name">
              人_说话_line
            </div>
            <div class="code-name">.icon-ren_shuohua_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangzuo_line"></span>
            <div class="name">
              向左_line
            </div>
            <div class="code-name">.icon-xiangzuo_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengwen_line"></span>
            <div class="name">
              声纹_line
            </div>
            <div class="code-name">.icon-shengwen_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lingdai_line"></span>
            <div class="name">
              领带_line
            </div>
            <div class="code-name">.icon-lingdai_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia_line"></span>
            <div class="name">
              文件夹_line
            </div>
            <div class="code-name">.icon-wenjianjia_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuju_line"></span>
            <div class="name">
              数据_line
            </div>
            <div class="code-name">.icon-shuju_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi_line"></span>
            <div class="name">
              复制_line
            </div>
            <div class="code-name">.icon-fuzhi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo2_line"></span>
            <div class="name">
              更多2_line
            </div>
            <div class="code-name">.icon-gengduo2_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuodong_line"></span>
            <div class="name">
              拖动_line
            </div>
            <div class="code-name">.icon-tuodong_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzishibie_line"></span>
            <div class="name">
              文字识别_line
            </div>
            <div class="code-name">.icon-wenzishibie_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia_line"></span>
            <div class="name">
              添加_line
            </div>
            <div class="code-name">.icon-tianjia_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_line"></span>
            <div class="name">
              文字_line
            </div>
            <div class="code-name">.icon-wenzi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou_shang_line"></span>
            <div class="name">
              箭头_上_line
            </div>
            <div class="code-name">.icon-jiantou_shang_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengyin_line"></span>
            <div class="name">
              声音_line
            </div>
            <div class="code-name">.icon-shengyin_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendang_line"></span>
            <div class="name">
              文档_line
            </div>
            <div class="code-name">.icon-wendang_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuan_line"></span>
            <div class="name">
              切换_line
            </div>
            <div class="code-name">.icon-qiehuan_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanjing_dakai_line"></span>
            <div class="name">
              眼睛_打开_line
            </div>
            <div class="code-name">.icon-yanjing_dakai_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shexiangji_line"></span>
            <div class="name">
              摄像机_line
            </div>
            <div class="code-name">.icon-shexiangji_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengbo_yuandi_fill"></span>
            <div class="name">
              声波_圆底_fill
            </div>
            <div class="code-name">.icon-shengbo_yuandi_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tanhao_yuandi_fill"></span>
            <div class="name">
              叹号_圆底_fill
            </div>
            <div class="code-name">.icon-tanhao_yuandi_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangji_line"></span>
            <div class="name">
              相机_line
            </div>
            <div class="code-name">.icon-xiangji_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyin_line"></span>
            <div class="name">
              语音_line
            </div>
            <div class="code-name">.icon-yuyin_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi_line"></span>
            <div class="name">
              设置_line
            </div>
            <div class="code-name">.icon-shezhi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-peizhi_line"></span>
            <div class="name">
              配置_line
            </div>
            <div class="code-name">.icon-peizhi_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai_line"></span>
            <div class="name">
              下载_line
            </div>
            <div class="code-name">.icon-xiazai_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mobang_line"></span>
            <div class="name">
              魔棒_line
            </div>
            <div class="code-name">.icon-mobang_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting2_fill"></span>
            <div class="name">
              暂停2_fill
            </div>
            <div class="code-name">.icon-zanting2_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diejia_fill"></span>
            <div class="name">
              叠加_fill
            </div>
            <div class="code-name">.icon-diejia_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mobang_fill"></span>
            <div class="name">
              魔棒_fill
            </div>
            <div class="code-name">.icon-mobang_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi_yuyin_fill"></span>
            <div class="name">
              消息_语音_fill
            </div>
            <div class="code-name">.icon-xiaoxi_yuyin_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shexiangji_fill"></span>
            <div class="name">
              摄像机_fill
            </div>
            <div class="code-name">.icon-shexiangji_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting_fill"></span>
            <div class="name">
              暂停_fill
            </div>
            <div class="code-name">.icon-zanting_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang_fill"></span>
            <div class="name">
              播放_fill
            </div>
            <div class="code-name">.icon-bofang_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenzi_yuandi_fill"></span>
            <div class="name">
              文字_圆底_fill
            </div>
            <div class="code-name">.icon-wenzi_yuandi_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duihao_yuandi_fill"></span>
            <div class="name">
              对号_圆底_fill
            </div>
            <div class="code-name">.icon-duihao_yuandi_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangsheng_fill"></span>
            <div class="name">
              上升_fill
            </div>
            <div class="code-name">.icon-shangsheng_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiajiang_fill"></span>
            <div class="name">
              下降_fill
            </div>
            <div class="code-name">.icon-xiajiang_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode_fill"></span>
            <div class="name">
              我的_fill
            </div>
            <div class="code-name">.icon-wode_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanli_fill"></span>
            <div class="name">
              管理_fill
            </div>
            <div class="code-name">.icon-guanli_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi_huifu_fill"></span>
            <div class="name">
              消息_回复_fill
            </div>
            <div class="code-name">.icon-xiaoxi_huifu_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kanban_fill"></span>
            <div class="name">
              看板_fill
            </div>
            <div class="code-name">.icon-kanban_fill
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuangjiantou_zuo_line"></use>
                </svg>
                <div class="name">双箭头_左_line</div>
                <div class="code-name">#icon-shuangjiantou_zuo_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuangjiantou_you_line"></use>
                </svg>
                <div class="name">双箭头_右_line</div>
                <div class="code-name">#icon-shuangjiantou_you_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianpan_line1"></use>
                </svg>
                <div class="name">键盘_line</div>
                <div class="code-name">#icon-jianpan_line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankaicelan_line"></use>
                </svg>
                <div class="name">展开侧栏_line</div>
                <div class="code-name">#icon-zhankaicelan_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouqicelan_line"></use>
                </svg>
                <div class="name">收起侧栏_line</div>
                <div class="code-name">#icon-shouqicelan_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin2_fill"></use>
                </svg>
                <div class="name">视频_fill</div>
                <div class="code-name">#icon-shipin2_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia_tianjia_line"></use>
                </svg>
                <div class="name">文件夹_添加_line</div>
                <div class="code-name">#icon-wenjianjia_tianjia_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang_jilu_line"></use>
                </svg>
                <div class="name">文档_记录_line</div>
                <div class="code-name">#icon-wendang_jilu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-juzhongduiqi_line"></use>
                </svg>
                <div class="name">居中对齐_line</div>
                <div class="code-name">#icon-juzhongduiqi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caijian_line"></use>
                </svg>
                <div class="name">裁剪_line</div>
                <div class="code-name">#icon-caijian_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping_line"></use>
                </svg>
                <div class="name">全屏_line</div>
                <div class="code-name">#icon-quanping_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian_tianjia_line"></use>
                </svg>
                <div class="name">图片_添加_line</div>
                <div class="code-name">#icon-tupian_tianjia_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_line1"></use>
                </svg>
                <div class="name">文字_line</div>
                <div class="code-name">#icon-wenzi_line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cengji_line1"></use>
                </svg>
                <div class="name">层级_line</div>
                <div class="code-name">#icon-cengji_line1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua_fill"></use>
                </svg>
                <div class="name">电话_fill</div>
                <div class="code-name">#icon-dianhua_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuodongbing_fill"></use>
                </svg>
                <div class="name">拖动柄_fill</div>
                <div class="code-name">#icon-tuodongbing_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cengji_fill"></use>
                </svg>
                <div class="name">层级_fill</div>
                <div class="code-name">#icon-cengji_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fabu_line"></use>
                </svg>
                <div class="name">发布_line</div>
                <div class="code-name">#icon-fabu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qingxi_line"></use>
                </svg>
                <div class="name">清晰_line</div>
                <div class="code-name">#icon-qingxi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qudao_line"></use>
                </svg>
                <div class="name">渠道_line</div>
                <div class="code-name">#icon-qudao_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao_fangxing_line"></use>
                </svg>
                <div class="name">加号_方形_line</div>
                <div class="code-name">#icon-jiahao_fangxing_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-QA_line"></use>
                </svg>
                <div class="name">QA_line</div>
                <div class="code-name">#icon-QA_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhanbitu_line"></use>
                </svg>
                <div class="name">占比图_line</div>
                <div class="code-name">#icon-zhanbitu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhushou_line"></use>
                </svg>
                <div class="name">助手_line</div>
                <div class="code-name">#icon-zhushou_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hi_line"></use>
                </svg>
                <div class="name">hi_line</div>
                <div class="code-name">#icon-hi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuju2_line"></use>
                </svg>
                <div class="name">数据2_line</div>
                <div class="code-name">#icon-shuju2_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangzi_zhuye_line"></use>
                </svg>
                <div class="name">房子_主页_line</div>
                <div class="code-name">#icon-fangzi_zhuye_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_xiahuaxian_line"></use>
                </svg>
                <div class="name">文字_下划线_line</div>
                <div class="code-name">#icon-wenzi_xiahuaxian_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yun_xiazai_line"></use>
                </svg>
                <div class="name">云_下载_line</div>
                <div class="code-name">#icon-yun_xiazai_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishijilu_line"></use>
                </svg>
                <div class="name">历史纪录_line</div>
                <div class="code-name">#icon-lishijilu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingxing_line"></use>
                </svg>
                <div class="name">星星_line</div>
                <div class="code-name">#icon-xingxing_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shu_line"></use>
                </svg>
                <div class="name">书_line</div>
                <div class="code-name">#icon-shu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moban_line"></use>
                </svg>
                <div class="name">模板_line</div>
                <div class="code-name">#icon-moban_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_zuoduiqi_line"></use>
                </svg>
                <div class="name">文字_左对齐_line</div>
                <div class="code-name">#icon-wenzi_zuoduiqi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian_line"></use>
                </svg>
                <div class="name">时间_line</div>
                <div class="code-name">#icon-shijian_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang_line"></use>
                </svg>
                <div class="name">分享_line</div>
                <div class="code-name">#icon-fenxiang_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_jiacu_line"></use>
                </svg>
                <div class="name">文字_加粗_line</div>
                <div class="code-name">#icon-wenzi_jiacu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_youduiqi_line"></use>
                </svg>
                <div class="name">文字_右对齐_line</div>
                <div class="code-name">#icon-wenzi_youduiqi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_xieti_line"></use>
                </svg>
                <div class="name">文字_斜体_line</div>
                <div class="code-name">#icon-wenzi_xieti_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_juzhong_line"></use>
                </svg>
                <div class="name">文字_居中_line</div>
                <div class="code-name">#icon-wenzi_juzhong_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche_line"></use>
                </svg>
                <div class="name">购物车_line</div>
                <div class="code-name">#icon-gouwuche_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima_line"></use>
                </svg>
                <div class="name">二维码_line</div>
                <div class="code-name">#icon-erweima_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinzhi_line"></use>
                </svg>
                <div class="name">禁止_line</div>
                <div class="code-name">#icon-jinzhi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianpu_line"></use>
                </svg>
                <div class="name">店铺_line</div>
                <div class="code-name">#icon-dianpu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuangzuo_line"></use>
                </svg>
                <div class="name">创作_line</div>
                <div class="code-name">#icon-chuangzuo_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duihao_line"></use>
                </svg>
                <div class="name">对号_line</div>
                <div class="code-name">#icon-duihao_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hanbao_line"></use>
                </svg>
                <div class="name">汉堡_line</div>
                <div class="code-name">#icon-hanbao_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-beijing_line"></use>
                </svg>
                <div class="name">背景_line</div>
                <div class="code-name">#icon-beijing_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nvxing_line"></use>
                </svg>
                <div class="name">女性_line</div>
                <div class="code-name">#icon-nvxing_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_xia_line"></use>
                </svg>
                <div class="name">箭头_下_line</div>
                <div class="code-name">#icon-jiantou_xia_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maikefeng_line"></use>
                </svg>
                <div class="name">麦克风_line</div>
                <div class="code-name">#icon-maikefeng_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiye_line"></use>
                </svg>
                <div class="name">企业_line</div>
                <div class="code-name">#icon-qiye_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuan_line"></use>
                </svg>
                <div class="name">人员_line</div>
                <div class="code-name">#icon-renyuan_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji_line"></use>
                </svg>
                <div class="name">编辑_line</div>
                <div class="code-name">#icon-bianji_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianpan_line"></use>
                </svg>
                <div class="name">键盘_line</div>
                <div class="code-name">#icon-jianpan_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangshang_line"></use>
                </svg>
                <div class="name">向上_line</div>
                <div class="code-name">#icon-xiangshang_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi_line"></use>
                </svg>
                <div class="name">关闭_line</div>
                <div class="code-name">#icon-guanbi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode_line"></use>
                </svg>
                <div class="name">我的_line</div>
                <div class="code-name">#icon-wode_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengwen2_line"></use>
                </svg>
                <div class="name">声纹2_line</div>
                <div class="code-name">#icon-shengwen2_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu_line"></use>
                </svg>
                <div class="name">删除_line</div>
                <div class="code-name">#icon-shanchu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fujian_line"></use>
                </svg>
                <div class="name">附件_line</div>
                <div class="code-name">#icon-fujian_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cengji_line"></use>
                </svg>
                <div class="name">层级_line</div>
                <div class="code-name">#icon-cengji_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_zuo_line"></use>
                </svg>
                <div class="name">箭头_左_line</div>
                <div class="code-name">#icon-jiantou_zuo_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouji_line"></use>
                </svg>
                <div class="name">手机_line</div>
                <div class="code-name">#icon-shouji_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan_line"></use>
                </svg>
                <div class="name">上传_line</div>
                <div class="code-name">#icon-shangchuan_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kanban_line"></use>
                </svg>
                <div class="name">看板_line</div>
                <div class="code-name">#icon-kanban_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin_line"></use>
                </svg>
                <div class="name">视频_line</div>
                <div class="code-name">#icon-shipin_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinlelvdong_line"></use>
                </svg>
                <div class="name">音乐律动_line</div>
                <div class="code-name">#icon-yinlelvdong_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengbo_line"></use>
                </svg>
                <div class="name">声波_line</div>
                <div class="code-name">#icon-shengbo_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paixu_line"></use>
                </svg>
                <div class="name">排序_line</div>
                <div class="code-name">#icon-paixu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru_line"></use>
                </svg>
                <div class="name">导入_line</div>
                <div class="code-name">#icon-daoru_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin_line"></use>
                </svg>
                <div class="name">刷新_line</div>
                <div class="code-name">#icon-shuaxin_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo_zongxiang_line"></use>
                </svg>
                <div class="name">更多_纵向_line</div>
                <div class="code-name">#icon-gengduo_zongxiang_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nanxing_line"></use>
                </svg>
                <div class="name">男性_line</div>
                <div class="code-name">#icon-nanxing_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_you_line"></use>
                </svg>
                <div class="name">箭头_右_line</div>
                <div class="code-name">#icon-jiantou_you_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangpin_line"></use>
                </svg>
                <div class="name">商品_line</div>
                <div class="code-name">#icon-shangpin_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hezi_line"></use>
                </svg>
                <div class="name">盒子_line</div>
                <div class="code-name">#icon-hezi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia_zhuancun_line"></use>
                </svg>
                <div class="name">文件夹_转存_line</div>
                <div class="code-name">#icon-wenjianjia_zhuancun_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangdajing_sousuo_line"></use>
                </svg>
                <div class="name">放大镜_搜索_line</div>
                <div class="code-name">#icon-fangdajing_sousuo_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangxia_line"></use>
                </svg>
                <div class="name">向下_line</div>
                <div class="code-name">#icon-xiangxia_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenhao_line"></use>
                </svg>
                <div class="name">问号_line</div>
                <div class="code-name">#icon-wenhao_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu_line"></use>
                </svg>
                <div class="name">导出_line</div>
                <div class="code-name">#icon-daochu_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouqi_line"></use>
                </svg>
                <div class="name">收起_line</div>
                <div class="code-name">#icon-shouqi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sheji_line"></use>
                </svg>
                <div class="name">设计_line</div>
                <div class="code-name">#icon-sheji_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangyou_line"></use>
                </svg>
                <div class="name">向右_line</div>
                <div class="code-name">#icon-xiangyou_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangqing_line"></use>
                </svg>
                <div class="name">详情_line</div>
                <div class="code-name">#icon-xiangqing_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing_guanbi_line"></use>
                </svg>
                <div class="name">眼睛_关闭_line</div>
                <div class="code-name">#icon-yanjing_guanbi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin2_line"></use>
                </svg>
                <div class="name">刷新2_line</div>
                <div class="code-name">#icon-shuaxin2_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinle_line"></use>
                </svg>
                <div class="name">音乐_line</div>
                <div class="code-name">#icon-yinle_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengyin_jingyin_line"></use>
                </svg>
                <div class="name">声音_静音_line</div>
                <div class="code-name">#icon-shengyin_jingyin_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiezhi_line"></use>
                </svg>
                <div class="name">贴纸_line</div>
                <div class="code-name">#icon-tiezhi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian_line"></use>
                </svg>
                <div class="name">图片_line</div>
                <div class="code-name">#icon-tupian_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ren_shuohua_line"></use>
                </svg>
                <div class="name">人_说话_line</div>
                <div class="code-name">#icon-ren_shuohua_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangzuo_line"></use>
                </svg>
                <div class="name">向左_line</div>
                <div class="code-name">#icon-xiangzuo_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengwen_line"></use>
                </svg>
                <div class="name">声纹_line</div>
                <div class="code-name">#icon-shengwen_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lingdai_line"></use>
                </svg>
                <div class="name">领带_line</div>
                <div class="code-name">#icon-lingdai_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia_line"></use>
                </svg>
                <div class="name">文件夹_line</div>
                <div class="code-name">#icon-wenjianjia_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuju_line"></use>
                </svg>
                <div class="name">数据_line</div>
                <div class="code-name">#icon-shuju_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi_line"></use>
                </svg>
                <div class="name">复制_line</div>
                <div class="code-name">#icon-fuzhi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo2_line"></use>
                </svg>
                <div class="name">更多2_line</div>
                <div class="code-name">#icon-gengduo2_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuodong_line"></use>
                </svg>
                <div class="name">拖动_line</div>
                <div class="code-name">#icon-tuodong_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzishibie_line"></use>
                </svg>
                <div class="name">文字识别_line</div>
                <div class="code-name">#icon-wenzishibie_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia_line"></use>
                </svg>
                <div class="name">添加_line</div>
                <div class="code-name">#icon-tianjia_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_line"></use>
                </svg>
                <div class="name">文字_line</div>
                <div class="code-name">#icon-wenzi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou_shang_line"></use>
                </svg>
                <div class="name">箭头_上_line</div>
                <div class="code-name">#icon-jiantou_shang_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengyin_line"></use>
                </svg>
                <div class="name">声音_line</div>
                <div class="code-name">#icon-shengyin_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang_line"></use>
                </svg>
                <div class="name">文档_line</div>
                <div class="code-name">#icon-wendang_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuan_line"></use>
                </svg>
                <div class="name">切换_line</div>
                <div class="code-name">#icon-qiehuan_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanjing_dakai_line"></use>
                </svg>
                <div class="name">眼睛_打开_line</div>
                <div class="code-name">#icon-yanjing_dakai_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shexiangji_line"></use>
                </svg>
                <div class="name">摄像机_line</div>
                <div class="code-name">#icon-shexiangji_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengbo_yuandi_fill"></use>
                </svg>
                <div class="name">声波_圆底_fill</div>
                <div class="code-name">#icon-shengbo_yuandi_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tanhao_yuandi_fill"></use>
                </svg>
                <div class="name">叹号_圆底_fill</div>
                <div class="code-name">#icon-tanhao_yuandi_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangji_line"></use>
                </svg>
                <div class="name">相机_line</div>
                <div class="code-name">#icon-xiangji_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyin_line"></use>
                </svg>
                <div class="name">语音_line</div>
                <div class="code-name">#icon-yuyin_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi_line"></use>
                </svg>
                <div class="name">设置_line</div>
                <div class="code-name">#icon-shezhi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-peizhi_line"></use>
                </svg>
                <div class="name">配置_line</div>
                <div class="code-name">#icon-peizhi_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai_line"></use>
                </svg>
                <div class="name">下载_line</div>
                <div class="code-name">#icon-xiazai_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobang_line"></use>
                </svg>
                <div class="name">魔棒_line</div>
                <div class="code-name">#icon-mobang_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting2_fill"></use>
                </svg>
                <div class="name">暂停2_fill</div>
                <div class="code-name">#icon-zanting2_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diejia_fill"></use>
                </svg>
                <div class="name">叠加_fill</div>
                <div class="code-name">#icon-diejia_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobang_fill"></use>
                </svg>
                <div class="name">魔棒_fill</div>
                <div class="code-name">#icon-mobang_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi_yuyin_fill"></use>
                </svg>
                <div class="name">消息_语音_fill</div>
                <div class="code-name">#icon-xiaoxi_yuyin_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shexiangji_fill"></use>
                </svg>
                <div class="name">摄像机_fill</div>
                <div class="code-name">#icon-shexiangji_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting_fill"></use>
                </svg>
                <div class="name">暂停_fill</div>
                <div class="code-name">#icon-zanting_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang_fill"></use>
                </svg>
                <div class="name">播放_fill</div>
                <div class="code-name">#icon-bofang_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzi_yuandi_fill"></use>
                </svg>
                <div class="name">文字_圆底_fill</div>
                <div class="code-name">#icon-wenzi_yuandi_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duihao_yuandi_fill"></use>
                </svg>
                <div class="name">对号_圆底_fill</div>
                <div class="code-name">#icon-duihao_yuandi_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangsheng_fill"></use>
                </svg>
                <div class="name">上升_fill</div>
                <div class="code-name">#icon-shangsheng_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiajiang_fill"></use>
                </svg>
                <div class="name">下降_fill</div>
                <div class="code-name">#icon-xiajiang_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode_fill"></use>
                </svg>
                <div class="name">我的_fill</div>
                <div class="code-name">#icon-wode_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanli_fill"></use>
                </svg>
                <div class="name">管理_fill</div>
                <div class="code-name">#icon-guanli_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi_huifu_fill"></use>
                </svg>
                <div class="name">消息_回复_fill</div>
                <div class="code-name">#icon-xiaoxi_huifu_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kanban_fill"></use>
                </svg>
                <div class="name">看板_fill</div>
                <div class="code-name">#icon-kanban_fill</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
